<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" th:href="@{/css/matrix-login.css}" />
<link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet" />
<!--<link th:href='@{http://fonts.googleapis.com/css?family=Open+Sans:400,700,800}' rel='stylesheet' type='text/css'/>-->
</head>
<body>
	<div id="loginbox">
		<!--/*@thymesVar id="msg" type="java.lang.String"*/-->
		<span th:text="${msg}"></span>
		<form id="registerform" class="form-vertical" th:action="@{/register}"
			action="" method="post">
			<div class="control-group normal_text">
				<h3>
					<img th:src="@{img/logo.png}" alt="Logo" />
				</h3>
			</div>
			<div class="control-group">
				<div class="controls">
					<div class="main_input_box">
						<span class="add-on bg_lg"><i class="icon-user"></i></span><input
							type="text" name="username" placeholder="Username" />
					</div>
				</div>
			</div>
			<div class="control-group">
				<div class="controls">
					<div class="main_input_box">
						<span class="add-on bg_ly"><i class="icon-lock"></i></span><input
							type="password" name="password" placeholder="Password" />
					</div>
				</div>
			</div>
			<div>
				<label>完成验证：</label>
				<div id="captcha">
					<p id="wait" class="show">正在加载验证码......</p>
				</div>
				<p id="notice" class="hide">请先完成验证</p>
			</div>
			<div class="form-actions">
				<span class="pull-left"><a href="/login"
					class="flip-link btn btn-success" id="to-login">&laquo; Back to
						login</a></span> <span class="pull-right"><a type="submit" id="submit2"
					class="btn btn-success">register</a></span>
			</div>
		</form>
	</div>
	<script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/gt.js}"></script>
	
	<script>
    var handler2 = function (captchaObj) {
        $("#submit2").click(function (e) {
            var result = captchaObj.getValidate();
            if (!result) {
                $("#notice").show();
                setTimeout(function () {
                    $("#notice").hide();
                }, 2000);
            } else {
                $.ajax({
                    url: '/ajax-validate2',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        username: $('#username').val(),
                        password: $('#password').val(),
                        geetest_challenge: result.geetest_challenge,
                        geetest_validate: result.geetest_validate,
                        geetest_seccode: result.geetest_seccode
                    },
                    success: function (data) {
                        if (data.status === 'success') {
                            alert('登录成功');
                        } else if (data.status === 'fail') {
                            alert('登录失败');
                        }
                    }
                })
            }
            e.preventDefault();
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交
        captchaObj.appendTo("#captcha");
        captchaObj.onReady(function () {
            $("#wait").hide();
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        url: "/ajax-register2?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 调用 initGeetest 初始化参数
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                product: "popup", // 产品形式，包括：float，popup
                width: "100%"
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handler2);
        }
    });
</script>
</body>
</html>